<template>
    <div class="index" v-if="bannerdata && initdata && inlist">
        <Search :isShow="false"></Search>
        <!-- 全部商品分类 -->
        <div class="banner">
            <div class="banner-classify">
                <p class="classify-title">
                    全部商品分类
                    <Icon class="ios-arrow-down" type="ios-arrow-down"></Icon>
                </p>
                <div class="banner-dropdown">
                    <ul>
                        <li v-for="(items,index) in initdata" :key="index">
                            <div class="menu-content">
                                <span class="jurz" @click="producone(items.proTypeOne.productTypeId,items.proTypeOne.type)">{{items.proTypeOne.name}}</span>
                                <Icon class="ios-arrow-right" type="ios-arrow-right"></Icon>
                            </div>
                            <div class="menu-list">
                                <div class="item" v-for="(item) in items.productTypeResults" :key="item.id">
                                    <p class="title" @click="producone(item.proTypeTwo.productTypeId,item.proTypeTwo.type)">{{item.proTypeTwo.name}}</p>
                                    <div class="list">
                                        <span v-for="(ite,index) in item.proTypeThrees" :key="index" @click="producone(ite.productTypeId,ite.type)">{{ite.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="menu">
                <ul>
                    <li class="active"><router-link to="/index">首页</router-link></li>
                    <li><router-link to="/building">建材商城</router-link></li>
                    <li><router-link to="/furniture">家居商城</router-link></li>
                    <li><router-link to="/brand">品牌活动</router-link></li>
                    <li>
                        <a href="http://www.zhuolukeji.com/salesPrograms.html" target="_blank">整包方案</a>
                    </li>
                    <!-- <li @click="modelShow=true">整包方案</li> -->
                    <li @click="modelShow=true">户型</li>
                </ul>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="ivue-banner">
            <Carousel autoplay arrow="never" loop v-model="value1"  @change="lbchange(index)">
                <Carousel-item class="bannerground" v-for="item in bannerdata" :key="item.id" :style="{'background-color':background}"  @change="lbchange(index)">
                    <div class="demo-carousel" :style="`background-image:url(${item.pictureUrl})`"></div>
                </Carousel-item>
            </Carousel>
        </div>     
            <!-- 间隔条 -->
        <div class="jgline"></div>
        <!-- 家具商品,建材商品 -->
        <div class="good-box">
            <div class="goods" v-for="(items,indexs) in inlist" :key="indexs">
                <div class="goods-title" v-if="indexs == 0">
                    <span class="goods-headline">家具商品</span>
                    <div class="goods-more">
                        <span class="goods-added" @click="producone(1,0)">更多</span>
                        <Icon class="goods-added-ios" type="ios-arrow-right"></Icon>
                        <Icon class="ttt" type="ios-arrow-right"></Icon>
                    </div>
                </div>
                <div class="goods-title" v-if="indexs == 1">
                    <span class="goods-headline">建材商品</span>
                    <div class="goods-more">
                        <span class="goods-added" @click="producone(2,0)">更多</span>
                        <Icon class="goods-added-ios" type="ios-arrow-right"></Icon>
                        <Icon class="ttt" type="ios-arrow-right"></Icon>
                    </div>
                </div>
                <div class="goods-list">
                    <div class="good-list-left" :style="`background-image:url(${items.labelConfig.pictureUrl})`" @click="producone(items.labelConfig.proTypeId,items.labelConfig.labelType)">
                        <div class="goods-list-title">
                            <span>{{items.labelConfig.modelName}}</span>
                            <p>{{items.labelConfig.description}}</p>
                            <p class="goods-price">¥1600起</p>
                        </div>
                    </div>
                    <div class="good-list-right">
                        <div class="good-picture"  v-for="(item,index) in items.productInfos" :key="index" @click="gooddetail(item.productId)">
                            <div class="data-shadow">
                                <div class="data">
                                    <div class="smallclass-picture" :style="`background-image:url(${item.mstImgUrl})`"></div>
                                    <div class="good-title">
                                        <div class="inner">
                                            <p>{{item.proName}}</p>
                                            <span class="model">{{item.defProModel}}</span>
                                            <p class="model-price">¥{{item.salesPrice}}</p>
                                        </div>
                                        <!-- hover底部 -->
                                        <div class="data_info">
                                            <div class="good-mask">
                                                <p>成交量：{{item.salesCount}}</p>
                                                <span>{{item.brandName}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="null" v-if="false">
            <!-- 首页搜索为空 -->
            <div class="empty">
                <div class="empty-image">
                    <img src="../assets/img/commoditySearch.png" alt="">
                </div>
                <div class="empty-cue">
                    <p>亲爱的，很抱歉，没有找到与
                        <span>“烟灰色大理石”</span>相关的商品</p>
                </div>
            </div>
        </div>
        <model :visible.sync="modelShow" content="浏览VR户型需要下载客户端"></model>

    </div>
</template>
<script>
import { Icon, Carousel, CarouselItem } from "iview";
import Model from "../components/modal.vue";
import Search from "../components/search.vue";
import { bannerList,initProductList,initProductType} from "../http/api.js";
export default {
    components: {
        Icon,
        Carousel,
        CarouselItem,
        Model,
        Search,
    },
    data() {
        return {
            modelShow: false,
            bannerdata:null,//轮播图数据
            initdata:null,  //类目数据
            inlist:null,   //商品导航数据
            value1:0,
            background:''
        };
    },
    watch: {
        value1:function() {
            if(this.value1 == 0){
                this.background = '#f6f2e9'
            }else if(this.value1 == 1) {
                this.background = '#e9e1d6'
            }else if(this.value1 == 2) {
                this.background = '#f0f0f2'
            }else if(this.value1 == 3) {
                this.background = '#79bbcb'
            }else if(this.value1 == 4) {
                this.background = '#faf1dd'
            }
            // console.log(this.value1)
        },
    },
    methods: {
        api_index() {
            //轮播图接口
            bannerList({bannerType:0,isEnable:1,facilityType:1}).then(res =>{
                // console.log(res)
                this.bannerdata = res.data.banners
            })
            // 类目初始化接口
            initProductType().then(response =>{
                this.initdata = response.data.productTypeResults
                // console.log(this.initdata)
            })
            // 商品导航展示接口
            initProductList({labelType:0}).then(respon =>{
                // console.log(respon)
                this.inlist = respon.data.initPrpductResult
            })
        },
        //轮播变换
        lbchange(index,value) {
            console.log(index)
            console.log(value)
            console.log(66)
        },
        //跳转到类目页
        producone (id,type) {
            // console.log(id,type)
            this.$router.push({path:"/classificationlist",query:{productTypeId:id,type:type}})
        },
        //跳转到详情页
        gooddetail (id) {
            this.$router.push({path:"/gooddetail",query:{productId:id}})
        },
    },
    created() {
        this.api_index()
    }
};
</script>
<style lang="less">
@import "../assets/styles/index.less";
</style>
